<template>
  <div>

    <!-- 学习完Vuex后请尝试用Vuex改写本例子 -->

    <div>
      <button @click="goStore">点击跳转到Vuex的例子</button>
    </div>
    
    <h1>兄弟组件之间传递数据，普通的方法是我们通过父组件来互相传递</h1>
      <section class="wrap">
        <div class="searchIpt clearFix">
          <!-- 你会发现下面两个组件是同级的（兄弟组件），怎么互相传值呢？ -->
          <!-- 1.在共同的父组件中自定义数据来传递值 -->
          <selects-input :title="title" :is-show.sync="listShow"></selects-input>
          <list v-show="listShow" :data="listData" @changeTitle="titleHandle"></list>
        </div>
      </section>

  </div>
</template>
<script>

// 两个子组件
import selectsInput from '@/components/selectsInput'
import list from '@/components/list'

let listData = [
  {
    title: 'javascript'
  },
  {
    title: 'html+css'
  },
  {
    title: 'jquery'
  },
  {
    title: 'angular'
  },
  {
    title: 'vue'
  },
  {
    title: 'react'
  },
  {
    title: 'nodejs'
  },
  {
    title: 'html5+css3'
  },
]

export default {
  data(){
    return {
      listShow: false,
      listData: listData,
      title: '',
    }
  },
  name: 'selects',
  components: {
    selectsInput,
    list
  },
  methods: {
    titleHandle(title){
      this.title = title;
    },
    goStore(){
      this.$router.push({name: 'increment'});
    }
  }
}
</script>
<style scoped>

</style>
